<template>
    <div>
        <Form :model="formItem" :label-width="80" >
            <Form-item label="标题">
                <Input v-model="formItem.bt" placeholder="请输入"></Input>
            </Form-item>
            <Form-item label="简短标题">
                <Input v-model="formItem.jdbt" placeholder="请输入"></Input>
            </Form-item>
            <Form-item label="摘要">
                <Input v-model="formItem.zy" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
            </Form-item>
            <Form-item label="作者">
                <Input v-model="formItem.zz" placeholder="请输入"></Input>
            </Form-item>
            <Form-item label="来源">
                <Input v-model="formItem.ly" placeholder="请输入"></Input>
            </Form-item>
            <Form-item label="内容">         
                <edit :value="value" :uploadUrl="uploadUrl" :fileName="fileName" @input="handelinput"></edit>  
            </Form-item>
            <Form-item style="text-align:center">
                <Button type="primary" @click="add">确认</Button>
                <Button type="ghost" style="margin-left: 8px" @click="back">返回</Button>
            </Form-item>           
        </Form>
        <Modal
            v-model="modal1"
            title="普通的Modal对话框标题"
            @on-ok="ok"
            @on-cancel="cancel">
            <p>上传成功</p>
        </Modal>
    </div>
</template>
<script>
import axios from 'axios'
import edit from "./hd_editor.vue"
export default {
    data(){
        return {
            value:this.$route.query.date.nr,
            uploadUrl:'localhost',
            fileName:'test.jpg',
            formItem: {
                bt: this.$route.query.date.bt,
                jdbt: this.$route.query.date.jdbt,
                zy: this.$route.query.date.zy, 
                zz: this.$route.query.date.zz, 
                ly: this.$route.query.date.ly
                          
            },
            nr: this.$route.query.date.nr,
            dbid:this.$route.query.date.dbid,
            modal1: false,
            methodName:this.$route.query.methodName,
            type:this.$route.query.type,
            city:this.$route.query.city, 
            staffId:this.$route.query.staffId,
            cs:this.$route.query.cs
        }    
    },
    components: {
        'edit': edit
    },
    methods:{
        back() {
            this.$router.push({query: {},path: this.cs});
        },
        add(){
            let that_ = this
            that_.$Modal.confirm({
                title: '确认对话框标题',
                content: '<p>请确认是否保存本条记录</p>',
                onOk: () => {
                    var qs = require('qs');
                    axios.post( url_+'/process/grsf_wz_back', 
                        qs.stringify({
                            m:that_.methodName,
                            dbid:that_.dbid,
                            flag: that_.type,
                            bt: that_.formItem.bt,
                            jdbt: that_.formItem.jdbt,
                            zy: that_.formItem.zy,
                            zz: that_.formItem.zz,
                            ly: that_.formItem.ly,
                            nr: that_.nr,
                            city:that_.city,
                            staffId:that_.staffId,
                            withCredentials:true
                        })
                    )
                    .then(function (response) {
                        that_.$Message.info('数据保存成功');                           
                        that_.back();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                onCancel: () => {
                    that_.$Message.info('您选择了取消');
                }
            });
        },
        handelinput(val){
           this.nr = val.html
        },
        ok () {
            this.$Message.info('点击了确定');
        },
        cancel () {
            this.$Message.info('点击了取消');
        }
    }
}
</script>
